<template>
  <section class="modlude">
    <el-form :inline="true" :model="formSearch" class="form_inline" label-width="90px">
      <!-- <el-form-item label="所属组织" size="small">
          <el-cascader
              ref="cascader"
              v-model="option1"
              :options="dataTree"
              :props="defaultProps2"
              @change="handleChange"
              clearable
            >
            </el-cascader>
        </el-form-item> -->
      <el-form-item label="所属项目" size="small">
        <el-select v-model="formSearch.projectId" placeholder="请选择项目">
          <el-option v-for="(item,index) in xqTree" :label="item.name" :value="item.id" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="线路名称" size="small">
        <el-input v-model="formSearch.name" placeholder="请输入线路名称"></el-input>
      </el-form-item>
      <el-form-item label="状态" size="small">
        <el-select v-model="formSearch.status" placeholder="请选择状态">
          <el-option label="全部" :value="''"></el-option>
          <el-option label="有效" :value="1"></el-option>
          <el-option label="无效" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="small">
        <!-- v-if="$root.btnControl.find(item=>item=='view')" -->
        <el-button size="small"  @click="getlist">查 询</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button size="small" @click="">重 置</el-button>
      </el-form-item> -->
      <el-form-item size="small">
        <!-- v-if="$root.btnControl.find(item=>item=='add')" -->
        <el-button size="small"  @click="addDialog = true"><i class="el-icon-plus"></i> 新 增</el-button>
      </el-form-item>
      <el-form-item size="small">
        <!-- v-if="$root.btnControl.find(item=>item=='delete')" -->
        <el-button size="small"  type="danger" @click="deleInfor(false)">批量删除</el-button>
      </el-form-item>

    </el-form>
    <el-table :data="formData" style="width: 100%" stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>

      <el-table-column prop="projectName" label="所属项目"></el-table-column>
      <el-table-column prop="name" label="巡查路线名称"></el-table-column>
      <el-table-column prop="num" label="巡查点数量"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{scope.row.status==1?"有效":'无效'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width=310>
        <template slot-scope="scope">
          <!-- v-if="$root.btnControl.find(item=>item=='valid')" -->
          <el-button type="" size="small"  @click="youxiaofou(scope.row)">无 效</el-button>
          <!-- v-if="$root.btnControl.find(item=>item=='edit')" -->
          <el-button type="warning" size="small"  @click="backfill(scope.row,2)">修 改</el-button>
          <!-- v-if="$root.btnControl.find(item=>item=='delete')" -->
          <el-button type="danger" size="small"  @click="deleInfor(scope.row.id)">删 除</el-button>
          <!-- v-if="$root.btnControl.find(item=>item=='view')" -->
          <el-button type="" size="small"  @click="backfill(scope.row,3)">详 情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <paging @changePage=handleCurrentPage :get-total='total'></paging>

    <!-- 新增 -->
    <el-dialog :title="isAddorUpdate==1?'新增':isAddorUpdate==2?'修改':'详情'" :visible.sync="addDialog" @close="canceladd"
      :close-on-click-modal="false">
      <div class="cont_box_right">
        <el-form label-position="right" label-width="100px" :model="formPush" ref='xclxlist'>

          <el-form-item label="选择项目" size="small" prop="projectId" :rules="{
                required: true, message: '项目不能为空', trigger: 'blur'
            }">
            <el-select @change="xqIdchange" v-model="formPush.projectId" placeholder="请选择项目">
              <el-option v-for="(item,index) in xqTree" :label="item.name" :value="item.id" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="路线名称" size="small" prop="name" :rules="{
                required: true, message: '巡查点名称不能为空', trigger: 'blur'
            }">
            <el-input v-model="formPush.name" placeholder="请输入路线名称"></el-input>
          </el-form-item>
          <el-form-item label="选择巡更点" :rules="{
            required: true, message: '巡更点不能为空', trigger: 'change'
        }">
            <el-select v-model="formPush.dotId" size="small" multiple placeholder="请选择">
              <el-option v-for="item in xunchadianData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请输入描述" size="small" prop="description">
            <el-input v-model="formPush.description"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status" :rules="{
            required: true, message: '状态不能为空', trigger: 'blur'
        }">
            <el-radio v-model="formPush.status" :label="0">无效</el-radio>
            <el-radio v-model="formPush.status" :label="1">有效</el-radio>
          </el-form-item>

        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium " @click="addDialog = false">取 消</el-button>
        <el-button size="medium " v-if="isAddorUpdate != 3" @click="addList('xclxlist')">提 交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
  import paging from "../paging"
  //   import paging1 from "../paging"
  import { updPatrolPath, deletePatrolPath, getPatrolPathList, addPatrolPath, getPatrolDotList, xqSelectList, orgTree } from '../../url/api';
  export default {
    data() {
      return {
        isAddorUpdate: 1,//1添加、2修改、3详情
        option1: [],
        xqTree: [],
        formSearch: {
          current: 1,
          size: 10,
          type: 1
        },
        formData: [],//数据
        xunchadianData: [],//巡查点数据
        total: 0,//数据总数
        total3: 0,//数据总数
        pages: 0,//页面总数
        dataTree: [],
        addDialog: false,//新增标识
        xgdDialog: false,//巡更点标识
        formPush: {//新增表单
          dotId: [],
          type: 1,
          status: 1,
          description: '',
          name: ''
        },
        formxungengdian: {
          current: 1,
          size: 5,
          type: 1
        },
        dotIdstring: '',//tag
        deleBatch: []
      }
    },
    methods: {
      youxiaofou(row) {
        let params = {
          id: row.id,
        }
        if (row.status == 0) {
          params.status = 1
        } else if (row.status == 1) {
          params.status = 0
        }
        this.$confirm("确定要执行此操作吗？", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updPatrolPath(params).then((res) => {
            if (res.data.ok) {
              this.$message({
                message: '操作成功！',
                type: 'success'
              });
              this.getlist()
            } else {
              this.$message('操作失败！')
            }
          })
        })
      },
      backfill(row, index) {
        this.isAddorUpdate = index
        this.formPush.projectId = row.projectId
        this.formPush.name = row.name
        this.formPush.dotId = []
        let List = row.dotId.split('_')
        List.forEach(val => {
          this.formPush.dotId.push(parseInt(val))
        });
        this.formPush.description = row.description
        this.formPush.status = row.status
        this.formPush.id = row.id
        this.getxgdList(row.projectId)
        this.addDialog = true
        console.log(this.formPush);
      },
      xqIdchange(val) {
        //console.log(val);
        this.formPush.dotId = []
        this.getxgdList(val)
      },

      deleInfor(ids) {

        let arrId = []
        if (ids) {
          arrId.push(ids)
        } else {
          if (this.deleBatch.length != 0) {
            this.deleBatch.filter((item) => {
              arrId.push(item.id)
              return item
            })
          } else {
            this.$message("请勾选要删除的数据！")
            return
          }
        }
        this.$confirm("确定要删除吗？", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deletePatrolPath(arrId).then((res) => {
            //console.log("删除", res)
            if (res.data.ok) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getlist()
            } else {
              this.$message('删除失败')
            }
          })

        })
      },



      getxgdList(id) {//巡更点列表

        let params = {
          projectId: id,
          type:1,
          current:1,
          size:9999
        }
        getPatrolDotList(params).then((res) => {//查询巡查点列表
          //console.log("查询巡查点列表", res)
          if (res.data.ok) {
            this.xunchadianData = res.data.data.records.filter((item) => {
              return item
            })
            this.total3 = res.data.data.total
          } else {
            this.$message(res.data.msg);
          }
        })

      },
      //新增
      addList(xcdlist) {

        console.log("this.formPush", this.formPush)
        this.$refs.xclxlist.validate((valid) => {
          console.log("valid", valid)
          if (valid) {
            this.$confirm("确定要执行此操作吗？", '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // this.addDialog = false
              // console.log(this.formPush)

              if (this.isAddorUpdate == 1) {
                addPatrolPath(this.formPush).then((res) => {
                  //console.log("新增", res)
                  if (res.data.ok) {
                    this.$message({
                      message: '添加成功',
                      type: 'success'
                    });
                    this.getlist()
                  } else {
                    this.$message('添加失败')
                  }
                })
                this.addDialog = false
              } else if (this.isAddorUpdate == 2) {
                updPatrolPath(this.formPush).then((res) => {
                  //console.log("新增", res)
                  if (res.data.ok) {
                    this.$message({
                      message: '修改成功',
                      type: 'success'
                    });
                    this.getlist()
                  } else {
                    this.$message('修改失败')
                  }
                })
                this.addDialog = false
              }


            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },


      canceladd() {
        this.isAddorUpdate = 1
        this.formPush = {
          dotId: [],
          type: 1,
          status: 1,
          description: '',
          name: ''
        };
        this.xunchadianData = []

      },
      //表格翻页多选
      getRowKeys: function (row) {
        return row.id;
      },

      handleCurrentPage3(val) {//页码区域改变
        this.formxungengdian.current = val
        this.getxgdList()
      },



      handleSelectionChange(val, self) {//多选
        this.deleBatch = val
        console.log(this.deleBatch)
      },


      getlist() {
        console.log("this.formSearch", this.formSearch)
        getPatrolPathList(this.formSearch).then((res) => {//查询路线列表
          console.log("巡更路线data", res)
          if (res.data.ok) {
            this.formData = res.data.data.records.filter((item) => {
              return item
            })
            this.total = res.data.data.total
          } else {
            this.$message(res.data.msg);
          }
        })
      },
      getInit() {
        // this.getshiwuTypejieshu()
        this.getlist()
        // this.getworkOrderlist()
        xqSelectList({}).then((res) => {//项目选择列表
          console.log(res)
          if (res.data.ok) {
            this.xqTree = res.data.data
          }
        })
      },

      handleCurrentPage(val) {//页码改变
        this.formSearch.current = val
        this.getlist()
      },

    },
    mounted() {
      this.getInit()
    },
    components: {
      paging,
      //   paging1
    }
  }
</script>
<style scoped>

</style>